<template>
  <div>
    <ol>
      <li>
        <label>描述</label>
        <input type="text" v-model.lazy.trim="memo" />
      </li>
      <li>
        <label>描述</label>
        <input type="text" v-model.lazy.trim="hot" />
      </li>
      <li>
        <label>描述</label>
        <input type="text" v-model.lazy.trim="type" />
      </li>
      <li>
        <label>图片</label>
        <!-- 将上传框的所有信息赋值给pic变量 -->
        <input type="file" ref="pic" />
      </li>
      <li>
        <router-link to="/admin">返回</router-link>
        <button @click="addpic()">上传</button>
      </li>
    </ol>
  </div>
</template>

<script>
export default {
  name: "Banner",
  data() {
    return {
      memo: "购书中心首页头部轮播图片",
      hot: 1,
      type: 1,
      pic: "",
    };
  },
  methods: {
    // 提交轮播数据
    addpic() {
      // this.$refs指向被ref属性绑定的标签元素
      // 上传框的value属性是files，被上传的文件具体信息
      // this.$refs.pic.files所上传的文件的完整数据
      // console.log(this.$refs.pic.files);
      let fs = this.$refs.pic.files; //获取的是图片数据
      // 判断是否有上传图片【有图片上传且图片是存在的】
      if (
        fs.length > 0 &&
        fs[0] != "" &&
        this.memo != "" &&
        this.hot != "" &&
        this.type != ""
      ) {
        // 创建一个空的表单对象数据
        let fd = new FormData();
        // 将需要打包的数据，append方式提交给对象
        fd.append("memo", this.memo); //将描述的值添加到表单对象中打包
        fd.append("hot", this.hot); //热度
        fd.append("type", this.type); //类型
        fd.append("pic", fs[0]); //图片
        // 发起post请求
        /*
					请求地址			http://127.0.0.1:8090/api/adm/hot/addHot
					提交数据
					表头配置			header:{ 'Content-Type' : '' }
				*/
        // console.log(fd);
        this.axios
          .post("/api/adm/hot/addHot", fd, {
            header: { "Content-Type": "multipart/form-data" },
          })
          .then((res) => {
            console.log(res);
            if (res.data.code === 200) {
              // 请求成功后，返回查询页
              this.$router.push("/admin/typeEdit");
            } else {
              alert(res.data.msg); //msg失败之后的返回信息
            }
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
  },
};
</script>

<style></style>
